

<template>
  <!-- 退款详情 -->
  <view class="Mall4j page">
    <!-- 头部状态 -->
    <view class="describe-box border_radius_23">
      <!-- 申请行进流程 -->
      <view class="process ">
        <!-- 提交申请 -->
        <view v-if="returnMoneySts == 1" class="current-process">{{
          i18n.refundDetails11
        }}</view>
        <view v-if="returnMoneySts == 1" class="acount-for-process">{{
          i18n.refundDetails12
        }}</view>
        <view v-if="returnMoneySts == 1" class="acount-for-process">{{
          updateTime
        }}</view>
        <!-- 商家拒绝 -->
        <view v-if="returnMoneySts == 7" class="current-process">{{
          i18n.refundDetails71
        }}</view>
        <view v-if="returnMoneySts == 7" class="acount-for-process">{{
          i18n.refundDetails72
        }}</view>
        <view v-if="returnMoneySts == 7" class="acount-for-process">{{
          updateTime
        }}</view>
        <!-- 商家同意退款 -->
        <view v-if="returnMoneySts == 2" class="current-process">{{
          i18n.refundDetails2
        }}</view>
        <view v-if="returnMoneySts == 2 && applyType == 1" class="acount-for-process">{{ i18n.refundDetails21 }}</view>
        <view v-if="returnMoneySts == 2 && applyType == 2" class="acount-for-process">{{ i18n.refundDetails22 }}</view>
        <view v-if="returnMoneySts == 2" class="acount-for-process">{{
          updateTime
        }}</view>
        <!-- 寄出商品（退货退款情况下） -->
        <view v-if="returnMoneySts == 3" class="current-process">{{
          i18n.refundDetails31
        }}</view>
        <view v-if="returnMoneySts == 3" class="acount-for-process">{{
          i18n.refundDetails32
        }}</view>
        <view v-if="returnMoneySts == 3" class="acount-for-process">{{
          updateTime
        }}</view>
        <!-- 商家确认收货 -->
        <view v-if="returnMoneySts == 4" class="current-process">{{
          i18n.refundDetails41
        }}</view>
        <view v-if="returnMoneySts == 4" class="acount-for-process">{{
          i18n.refundDetails42
        }}</view>
        <view v-if="returnMoneySts == 4" class="acount-for-process">{{
          updateTime
        }}</view>
        <!-- 退款成功 -->
        <view v-if="returnMoneySts == 5" class="current-process">{{
          i18n.refundDetails51
        }}</view>
        <view v-if="returnMoneySts == 5" class="acount-for-process">{{
          refundTime
        }}</view>
        <!-- 退款申请关闭 -->
        <view v-if="returnMoneySts == -1" class="current-process">{{
          i18n.refundDetails_1
        }}</view>
        <view v-if="returnMoneySts == -1" class="acount-for-process">
          <!-- 由于你超时未处理，系统已关闭本次退款申请 -->{{
            rejectMessage ? rejectMessage : ""
          }}
        </view>
        <view v-if="returnMoneySts == -1" class="acount-for-process">{{
          updateTime
        }}</view>
        <!-- 买家撤回申请 -->
        <view v-if="returnMoneySts == 6" class="current-process">{{
          i18n.refundDetails61
        }}</view>
        <view v-if="returnMoneySts == 6" class="acount-for-process">{{
          i18n.refundDetails62
        }}</view>
        <view v-if="returnMoneySts == 6" class="acount-for-process">{{
          updateTime
        }}</view>

        <!-- 隐藏内容（仅退款） -->
        <view v-if="returnMoneySts == 1" :class="showView ? 'display' : 'more-content'">
          <view class="cont">{{ i18n.refundDetails13 }}</view>
          <view class="cont">{{ i18n.refundDetails01 }}</view>
          <!-- <view class="cont">如果商家逾期未处理，退款申请将自动达成并退款给你</view> -->
        </view>
        <!-- 隐藏内容（退货退款申请商品未寄出） -->
        <view v-if="returnMoneySts == 2" :class="showView ? 'display' : 'more-content'">
          <view class="cont">{{ i18n.refundDetails23 }}</view>
          <view class="cont">{{ i18n.refundDetails01 }}</view>
          <!-- <view class="cont">如果商家逾期未处理，请按照系统给出的退货地址退货</view> -->
        </view>
        <!-- 隐藏内容（退货退款并已寄出货物） -->
        <view v-if="returnMoneySts == 3" :class="showView ? 'display' : 'more-content'">
          <view class="cont">{{ i18n.refundDetails33 }}</view>
          <view class="cont">{{ i18n.refundDetails02 }}</view>
          <!-- <view class="cont">如果商家逾期未处理，系统将自动确认收货并退款给你</view> -->
        </view>
      </view>
      <!-- 申请行进流程end -->

      <!-- 更多说明 -->
      <view v-if="returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2" :class="showView ? 'more-instructions' : 'display'" @tap="onChangeShowState">
        <text class="more-txt">{{ i18n.moreExplanation }}</text>
        <view class="down-arrow-icon">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/down-arrow.png" />
        </view>
      </view>
      <!-- 收起 -->
      <view v-if="returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2" :class="showView ? 'display' : 'more-instructions'" @tap="onChangeShowState">
        <text class="more-txt">{{ i18n.putAway }}</text>
        <view class="down-arrow-icon">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/up-arrow.png" />
        </view>
      </view>
    </view>
    <!-- 头部状态end -->

    <!-- 【退款申请被拒绝时显示】拒绝理由 -->
    <view v-if="returnMoneySts == 7" class="refuse-reason">{{ i18n.refundDetails73 }}：{{ rejectMessage }}</view>
    <view v-if="sellerMsg" class="refuse-reason">{{ i18n.sellerRemarks }}：{{ sellerMsg }}</view>

    <!-- 【退货退款状态下，买家同意后】退货地址 -->
    <view v-if="returnMoneySts == 2 && applyType == 2" class="return-address">
      <view class="addr-tit">{{ i18n.returnAddress }}</view>
      <view class="address">
        <view class="recipient">
          <text class="addr-cont">{{ i18n.recipient }}：{{ refundDelivery.receiverName }}</text>
          <text class="mobile">{{ refundDelivery.receiverMobile }}</text>
        </view>
        <view class="addr">{{ i18n.detailedAddress }}：{{ refundDelivery.receiverAddr }}</view>
      </view>
    </view>

    <!-- 退款信息 -->
    <view class="refund-message border_radius_23">
      <view class="refund-txt">{{ i18n.refundInformation }}</view>
      <view class="goods-msg-box">
        <!-- 图片 -->
        <view v-if="orderItems.length == 1" class="img-box">
          <image v-if="orderItems[0].pic" :src="orderItems[0].pic" />
          <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
        </view>
        <!-- 信息 -->
        <view v-if="orderItems.length == 1" class="goods-text">
          <view class="goods-title">{{ orderItems[0].prodName }}</view>
          <view class="goods-quantity">{{ i18n.quantity }}：{{ orderItems[0].prodCount
          }}{{ i18n.piece }}</view>
        </view>

        <block v-if="orderItems.length > 1">
          <view v-for="(item, index) in orderItems" :key="index" class="refund-goods-item">
            <!-- 图片 -->
            <view class="img-box">
              <image :src="item.pic" />
            </view>
            <!-- 信息 -->
            <view class="goods-text">
              <view class="goods-title">{{ item.prodName }}</view>
              <view class="goods-quantity">{{ i18n.quantity }}：{{ item.prodCount }}{{ i18n.piece }}</view>
            </view>
          </view>
        </block>
      </view>
      <!-- 具体信息 -->
      <view class="refund-cont"><text class="refund_cont_text1">{{ i18n.refundMethod }}：</text><text class="refund_cont_text2">{{
        ["", i18n.refund01, i18n.refund02][applyType]
      }}</text></view>
      <view v-if="buyerReason!=7" class="refund-cont"><text class="refund_cont_text1">{{ i18n.refundReason }}：</text><text class="refund_cont_text2">{{ refundProdReasonArray[buyerReason] }}</text></view>
      <view class="refund-cont"><text class="refund_cont_text1">{{ i18n.refundInstructions }}：</text><text class="refund_cont_text2">{{ buyerDesc }}</text></view>
      <view class="refund-cont"><text class="refund_cont_text1">{{ i18n.refundAmount }}：</text><text class="refund_cont_text2"><text v-if="refundAmount > 0" class="red">￥{{ refundAmount.toFixed(2) }}</text>
          <text v-if="refundAmount > 0 && refundScore > 0" class="red">+</text>
          <text v-if="refundScore > 0" class="red">{{ refundScore }}{{ i18n.integral }}</text></text>

      </view>
      <view class="refund-cont"><text class="refund_cont_text1">{{ i18n.refundNumber }}：</text><text class="refund_cont_text2">{{ refundSn }}</text></view>
      <view class="refund-cont"><text class="refund_cont_text1">{{ i18n.applicationTime }}：</text><text class="refund_cont_text2">{{ applyTime }}</text></view>
      <!-- 【退货申请显示】 -->
      <view v-if="goodsNum > 0" class="refund-cont"><text class="refund_cont_text1">{{ i18n.quantityReturned }}：</text><text class="refund_cont_text2"></text>{{ goodsNum }}</view>
      <!-- 联系商家 -->
      <!-- <view class="contact-merchant">联系商家</view> -->
      <!-- <button class="contact-merchant" open-type="contact">联系客服</button> -->
    </view>

    <!-- 物流信息 -->
    <view v-if="deliveryDto && deliveryDto.traces && deliveryDto.traces.length" class="refund-message deliveryDto">
      <view class="refund-txt">{{ i18n.logisticsInformation }}</view>
      <!-- 具体信息 -->
      <view v-for="(logItem, logIndex) in deliveryDto.traces" :key="logIndex" class="refund-cont">
        <view class="time">{{ logItem.acceptTime }}</view>
        <view class="text-box">
          <!-- <view class="name">{{nickName}}</view> -->
          <view class="name acceptStation">{{ logItem.acceptStation }}</view>
        </view>
      </view>
    </view>

    <!-- 脚部撤销申请 -->
    <!-- applyType: 1,  //申请类型:1,仅退款,2退款退货 -->
    <!-- returnMoneySts： 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭) -->
    <view class="foot-box">
      <view class="footer">
        <!-- 【申请后-申请完成前】 -->
        <text v-if="
            returnMoneySts == 1 ||
              returnMoneySts == 7 ||
              (returnMoneySts == 2 && applyType == 2)
          " class="undo-apply" @tap="cancelApplication">{{ i18n.applicationCanceled }}</text>
        <!-- 【商家拒绝时显示】 -->
        <!-- <text class="undo-apply apply-current" bindtap="toAlterRefundApply" wx:if="{{returnMoneySts ==1 || returnMoneySts == 7}}" data-refundsn="{{refundSn}}">修改申请</text> -->
        <!-- 【商家同意后-货物寄出前】 -->
        <text v-if="returnMoneySts == 2 && applyType == 2" class="undo-apply apply-current" :data-refundsn="refundSn" @tap="toLogisticsPage(refundSn, '0')">{{ i18n.fillInReturn }}</text>
        <text v-if="returnMoneySts == 3 && applyType == 2" class="undo-apply apply-current" @tap="toLogisticsPage(refundSn, '1')">{{ i18n.modifyReturn }}</text>
      </view>
    </view>
  </view>
</template>

<script>
// pages/refund-details/refund-details.js
var http = require('../../utils/http.js')

export default {

  components: {},
  props: {},
  data () {
    return {
      showView: true,
      // 隐藏是展示
      applyTime: '',
      // 申请时间
      applyType: 1,
      // 申请类型:1,仅退款,2退款退货
      goodsNum: '',
      // 退货数量
      handelTime: '',
      // 卖家处理时间
      orderAmount: '',
      // 订单总金额
      orderItems: {},
      // 订单项
      refundAmount: '',
      // 退款金额
      refundDelivery: [],
      // 收货地址对象
      refundId: '',
      // 记录ID
      refundTime: '',
      // 退款时间
      returnMoneySts: 1,
      // 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
      updateTime: '',
      // 更新时间
      refundSn: '',
      // 退款编号
      rejectMessage: '',
      // 拒绝理由
      buyerReason: '',
      // 退款原因
      buyerDesc: '', // 退款说明
      shopName: '', // 店铺名称
      refundScore: '', // 积分
      refundProdReasonArray: [], // 退款原因数组
      sellerMsg: '', // 卖家备注
      // 物流信息
      deliveryDto: {}
    }
  },
  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.refundProdReasonArray.push(this.i18n.wrongShot, this.i18n.refundConsensus, this.i18n.damagedGoods,
      this.i18n.productNot, this.i18n.sellerSendsWrong, this.i18n.qualityProblem, this.i18n.other)
    this.setData({
      refundSn: options.refundSn
    }) // 获取退款申请详情

    this.getRefundDetail()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.refundDetails
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
     * 更多说明&收起
     */
    onChangeShowState: function () {
      var that = this
      that.setData({
        showView: !that.showView
      })
    },

    /**
     * 获取退款申请详情
     */
    getRefundDetail: function (e) {
      var ths = this
      var params = {
        url: '/p/orderRefund/info',
        method: 'GET',
        data: {
          refundSn: this.refundSn // 退款编号

        },
        callBack: function (res) {
          ths.setData({
            applyTime: res.applyTime,
            // 申请时间
            applyType: res.applyType,
            // 申请类型:1,仅退款,2退款退货
            goodsNum: res.goodsNum,
            // 退货数量
            handelTime: res.handelTime,
            // 卖家处理时间
            orderAmount: res.orderAmount,
            // 订单总金额
            orderItems: res.orderItems,
            // 订单项
            refundSn: res.refundSn,
            // 退款编号
            refundAmount: res.refundAmount,
            // 退款金额
            refundDelivery: res.refundDelivery,
            // 收货地址对象
            refundId: res.refundId,
            // 记录ID
            refundTime: res.refundTime,
            // 退款时间
            returnMoneySts: res.returnMoneySts,
            // 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
            updateTime: res.updateTime,
            // 更新时间
            rejectMessage: res.rejectMessage,
            // 拒绝理由
            buyerReason: res.buyerReason,
            // 退款原因
            buyerDesc: res.buyerDesc, // 退款说明
            shopName: res.shopName,
            // 积分数量
            refundScore: res.refundScore,
            sellerMsg: res.sellerMsg,
            // 退货物流信息
            deliveryDto: res.deliveryDto
          })
        }
      }
      http.request(params)
    },

    /**
     * 撤销退货退款申请
     */
    cancelApplication: function (e) {
      uni.showModal({
        title: this.i18n.revoke,
        content: this.i18n.revokeTips,
        cancelText: this.i18n.cancel,
        confirmText: this.i18n.confirm,
        success: res => {
          if (res.confirm) {
            var params = {
              url: '/p/orderRefund/cancel',
              method: 'PUT',
              data: this.refundSn,
              // 退款订单编号
              callBack: function (res) {
                uni.redirectTo({
                  url: '/pages/after-sales/after-sales'
                })
              }
            }
            http.request(params)
          }
        }
      })
    },

    /**
     * 跳转修改退款申请
     */
    // toAlterRefundApply: function (e) {
    //   var refundSn = e.currentTarget.dataset.refundsn;
    //   console.log(e.currentTarget.dataset.refundsn)
    //   uni.navigateTo({
    //     url: '/pages/apply-refund/apply-refund?refundSn=' + refundSn,
    //   })
    // },

    /**
     * 填写物流信息
     */
    toLogisticsPage: function (refundSn, isModify) {
      uni.navigateTo({
        url: '/pages/write-return-logistics/write-return-logistics?refundSn=' + refundSn + '&isModify=' + isModify
      })
    }

  }
}
</script>
<style scoped lang='scss'>
@import "./refund-details.scss";
</style>
